<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般在固定场景下使用。
		</demo-desc>

		<fu-section :title="item.title" customClass="fu-m-t-20" type="line" v-for="(item, index) in sectionMenu" :key="index">
			<view class="fu-flex fu-m-t-20">
				<view 
					class="fu-w-150 fu-l-h-66 fu-text-c fu-b-r-10 fu-m-r-20" 
					:class="[item.current === index2? 'menu-active': 'menu-default']"
					v-for="(item2, index2) in item.optional" :key="index2" @click="onClick(index, index2, item)">
					{{ item2 || '' }}</view>
			</view>
		</fu-section>

		<fu-fab :list="list" :left="left" :right="right" :bottom="bottom" :width="width" :height="height"
			:iconSize="iconSize" :icon="icon" :bgColor="backgroundColor" :fontColor="fontColor"
			:animationType="animationType" :showMask="showMask" @click="clickFabItem"></fu-fab>
	</view>
</template>

<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue';
	
	// data数据
	const { $fu } = getCurrentInstance().appContext.config.globalProperties;
	let left = ref('auto');
	let right = ref(40);
	let bottom = ref(100);
	let width = ref(88);
	let height = ref(88);
	let iconSize = ref(32);
	let icon = ref('upload-cloud');
	let backgroundColor = ref('#2979ff');
	let fontColor = ref('#FFFFFF');
	let animationType = ref('up');
	let showMask = ref(true);
	let list = reactive([
		{ icon: 'service', text: 'fuUi', bgColor: '#E72F8C' },
		{ text: 'UI', textSize: 32, bgColor: '#FF7043' },
		{ icon: 'volume', iconSize: 32, iconColor: '#AAAAAA', bgColor: '#24F083' }
	]);
	const sectionMenu = reactive([
		{ title: '悬浮按钮位置', optional: ['左侧', '右侧'], methods: 'positionChange', current: 1 },
		{ title: '自定义悬浮按钮信息', optional: ['默认', '自定义'], methods: 'customFabChange', current: 0 },
		{ title: '自定义尺寸', optional: ['默认', '自定义'], methods: 'sizeChange', current: 0 },
		{ title: '动画类型', optional: ['向上弹出', '圆环弹出'], methods: 'animationChange', current: 0 },
		{ title: '遮罩显示', optional: ['显示', '隐藏'], methods: 'maskChange', current: 0 }
	]);
	
	// methods方法
	const onClick = (index, index2, e) => {
		sectionMenu[index]['current'] = index2;
		methods[e.methods] && methods[e.methods](index2)
	};
	
	// 点击悬浮按钮的内容
	const clickFabItem = (e) => {
		$fu.toast(`点击了第 ${e.index} 个选项`)
	};
	
	const methods = {
		// 切换动画
		animationChange(e) {
			switch (e) {
				case 0:
					animationType.value = 'up';
					break
				case 1:
					animationType.value = 'around';
					break
			}
		},
		
		// 切换按钮位置
		positionChange(e) {
			switch (e) {
				case 0:
					left.value = 40;
					right.value = 'auto';
					bottom.value = 100;
					break
				case 1:
					left.value = 'auto';
					right.value = 40;
					bottom.value = 100;
					break
			}
		},
		
		// 切换悬浮按钮信息
		customFabChange(e) {
			switch (e) {
				case 0:
					backgroundColor.value = '#01BEFF';
					fontColor.value = '#FFFFFF';
					icon.value = 'upload-cloud';
					break
				case 1:
					backgroundColor.value = 'linear-gradient(45deg, #F5317F, #FF7C6E)';
					fontColor.value = '#FFFFFF';
					icon.value = 'help';
					break
			}
		},
		
		// 切换尺寸信息
		sizeChange(e) {
			switch (e) {
				case 0:
					width.value = 88;
					height.value = 88;
					iconSize.value = 32;
					break
				case 1:
					width.value = 64;
					height.value = 64;
					iconSize.value = 24;
					break
			}
		},
		
		// 切换遮罩信息
		maskChange(e) {
			switch (e) {
				case 0:
					showMask.value = true;
					break
				case 1:
					showMask.value = false;
					break
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu-active {
		background-image: repeating-linear-gradient(45deg, #E72F8C, #892FE8);
		color: #FFFFFF;
	}

	.menu-default {
		background-image: repeating-linear-gradient(45deg, #FAD5E8, #E7D5FA);
		color: #E72F8C;
	}
</style>